<template>
  <div class="equipment-detail">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <el-button 
          type="text" 
          icon="el-icon-arrow-left" 
          @click="goBack"
          class="back-btn"
        >
          设备详情
        </el-button>
      </div>
    </div>

    <!-- 设备概览信息 -->
    <div class="overview-section">
      <div class="overview-content">
        <div class="overview-col">
          <div class="info-item">
            <span class="label">小区:</span>
            <span class="value">{{ equipmentInfo.communityName || 'XXXXXXXXX小区' }}</span>
          </div>
          <div class="info-item">
            <span class="label">安装地点:</span>
            <span class="value">{{ equipmentInfo.installationLocation || '1号楼三单元12楼楼道' }}</span>
          </div>
          <div class="info-item">
            <span class="label">设备名称:</span>
            <span class="value">{{ equipmentInfo.equipmentName || '摄像头' }}</span>
          </div>
        </div>
        <div class="overview-col">
          <div class="info-item">
            <span class="label">规格型号:</span>
            <span class="value">{{ equipmentInfo.equipmentSpecification || 'XXXXXXXXXXXXXX' }}</span>
          </div>
          <div class="info-item">
            <span class="label">设备状态:</span>
            <span class="value status-normal">{{ getStatusText(equipmentInfo.equipmentStatus) }}</span>
          </div>
          <div class="info-item">
            <span class="label">保养周期:</span>
            <span class="value">{{ getMaintenancePeriodText(equipmentInfo.maintenancePeriod) }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 标签页内容 -->
    <div class="tabs-container">
      <el-tabs v-model="activeTab" class="equipment-tabs">
        <!-- 基本信息 -->
        <el-tab-pane label="基本信息" name="basic">
          <div class="tab-content">
            <div class="content-row">
              <div class="content-col">
                <div class="info-item">
                  <span class="label">小区:</span>
                  <span class="value">{{ equipmentInfo.communityName || 'XXXXXXXXX小区' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">安装地点:</span>
                  <span class="value">{{ equipmentInfo.installationLocation || '1号楼三单元12楼楼道' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">设备名称:</span>
                  <span class="value">{{ equipmentInfo.equipmentName || '摄像头' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">设备类型:</span>
                  <span class="value">{{ getCategoryText(equipmentInfo.equipmentCategory) }}</span>
                </div>
                <div class="info-item">
                  <span class="label">设备编码:</span>
                  <span class="value">{{ equipmentInfo.equipmentCode || 'XXXXXXXXXXXXXX' }}</span>
                </div>
              </div>
              <div class="content-col">
                <div class="info-item">
                  <span class="label">规格型号:</span>
                  <span class="value">{{ equipmentInfo.equipmentSpecification || 'XXXXXXXXXXXXXX' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">设备状态:</span>
                  <span class="value status-normal">{{ getStatusText(equipmentInfo.equipmentStatus) }}</span>
                </div>
                <div class="info-item">
                  <span class="label">保养周期:</span>
                  <span class="value">{{ getMaintenancePeriodText(equipmentInfo.maintenancePeriod) }}</span>
                </div>
                <div class="info-item">
                  <span class="label">材料:</span>
                  <span class="value">{{ equipmentInfo.material || 'XXXX' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">重量(KG):</span>
                  <span class="value">{{ equipmentInfo.weight || '--' }}</span>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <!-- 维修记录 -->
        <el-tab-pane label="维修记录" name="repair">
          <div class="tab-content">
            <div class="table-container">
              <el-table
                :data="repairRecords"
                v-loading="repairLoading"
                stripe
                border
                style="width: 100%"
                :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
              >
                <el-table-column prop="serialNumber" label="序号" width="80" align="center" />
                <el-table-column prop="maintenanceOrderNumber" label="维修单号" width="140" align="center" />
                <el-table-column prop="maintenanceTime" label="维修时间" width="120" align="center" />
                <el-table-column prop="maintenanceItem" label="维修项目" width="120" align="center" />
                <el-table-column prop="faultDescription" label="维修说明" width="120" align="center" />
                <el-table-column prop="maintenanceCost" label="维修费用(元)" width="120" align="right" />
                <el-table-column prop="faultLevel" label="故障等级" width="100" align="center" />
                <el-table-column prop="reporter" label="报修人" width="100" align="center" />
                <el-table-column prop="reportTime" label="报修时间" width="140" align="center" />
              </el-table>
            </div>
          </div>
        </el-tab-pane>

        <!-- 保养记录 -->
        <el-tab-pane label="保养记录" name="maintenance">
          <div class="tab-content">
            <div class="table-container">
              <el-table
                :data="maintenanceRecords"
                v-loading="maintenanceLoading"
                stripe
                border
                style="width: 100%"
                :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
              >
                <el-table-column prop="serialNumber" label="序号" width="80" align="center" />
                <el-table-column prop="maintenanceOrderNumber" label="保养单号" width="140" align="center" />
                <el-table-column prop="maintenanceDate" label="保养间" width="120" align="center" />
                <el-table-column prop="maintenanceItem" label="保养项目" width="120" align="center" />
                <el-table-column prop="remarks" label="保养说明" width="120" align="center" />
                <el-table-column prop="maintenanceCost" label="保养费用(元)" width="120" align="right" />
                <el-table-column prop="maintenancePerson" label="保养人" width="100" align="center" />
                <el-table-column prop="maintenanceTime" label="保养时间" width="140" align="center" />
              </el-table>
            </div>
          </div>
        </el-tab-pane>

        <!-- 使用情况 -->
        <el-tab-pane label="使用情况" name="usage">
          <div class="tab-content">
            <div class="content-row">
              <div class="content-col">
                <div class="info-item">
                  <span class="label">安装日期:</span>
                  <span class="value">{{ formatDate(equipmentInfo.installationDate) || '2021-09-11' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">设备原值:</span>
                  <span class="value">{{ equipmentInfo.equipmentOriginalValue || '8902.00' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">设备净值:</span>
                  <span class="value">{{ equipmentInfo.equipmentNetValue || '6902.00' }}</span>
                </div>
              </div>
              <div class="content-col">
                <div class="info-item">
                  <span class="label">报废日期:</span>
                  <span class="value">{{ formatDate(equipmentInfo.warrantyDate) || '2029-10-11' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">已提旧值:</span>
                  <span class="value">{{ equipmentInfo.accumulatedDepreciation || '0.6' }}</span>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <!-- 维保单位信息 -->
        <el-tab-pane label="维保单位信息" name="maintenance-unit">
          <div class="tab-content">
            <div class="content-row">
              <div class="content-col">
                <div class="info-item">
                  <span class="label">维保单位:</span>
                  <span class="value">{{ equipmentInfo.maintenanceUnit || 'XXXXXXXXXX科技有限公司' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">维保单位地址:</span>
                  <span class="value">{{ equipmentInfo.maintenanceAddress || 'XXXXXXXXXX路XXXXX号XXXX' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">生产厂家:</span>
                  <span class="value">{{ equipmentInfo.manufacturer || 'XXXXXXXXXX科技有限公司' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">厂家地址:</span>
                  <span class="value">{{ equipmentInfo.manufacturerAddress || 'XXXXXXXXXX路XXXXX号XXXX' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">登记日期:</span>
                  <span class="value">{{ formatDate(equipmentInfo.registrationDate) || '2021-04-21' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">备注:</span>
                  <span class="value">{{ equipmentInfo.remarks || 'XXXXXXXXXXXXXXXX' }}</span>
                </div>
              </div>
              <div class="content-col">
                <div class="info-item">
                  <span class="label">维保单位电话:</span>
                  <span class="value">{{ equipmentInfo.maintenancePhone || '1982828912' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">设备维保人:</span>
                  <span class="value">{{ equipmentInfo.equipmentMaintainer || '张小琴' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">厂家电话:</span>
                  <span class="value">{{ equipmentInfo.manufacturerPhone || '89289101' }}</span>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { equipmentApi } from '@/api/equipment'

export default {
  name: 'EquipmentDetail',
  data() {
    return {
      // 当前激活的标签页
      activeTab: 'basic',
      
      // 设备基本信息
      equipmentInfo: {},
      
      // 维修记录
      repairRecords: [],
      repairLoading: false,
      
      // 保养记录
      maintenanceRecords: [],
      maintenanceLoading: false,
      
      // 设备状态映射
      statusMap: {
        1: '正常',
        2: '故障', 
        3: '维修中',
        4: '停用'
      },
      
      // 设备类别映射
      categoryMap: {
        1: '电梯',
        2: '空调',
        3: '消防设备',
        4: '照明设备',
        5: '给排水设备',
        6: '安防设备',
        7: '广告设备',
        8: '其他设备'
      },
      
      // 保养周期映射
      periodMap: {
        1: '每月',
        3: '每季度',
        6: '每半年',
        12: '每年',
        24: '每两年'
      }
    }
  },
  
  mounted() {
    this.loadEquipmentDetail()
  },
  
  methods: {
    // 加载设备详情
    async loadEquipmentDetail() {
      try {
        const equipmentId = this.$route.params.id
        if (!equipmentId) {
          this.$message.error('设备ID不能为空')
          return
        }
        
        const response = await equipmentApi.getEquipmentDetail(equipmentId)
        if (response.code === 200) {
          this.equipmentInfo = response.data.getEquipById || {}
          this.formatRepairRecords(response.data.equipmentMaintenances || [])
          this.formatMaintenanceRecords(response.data.maintenanceRecords || [])
        } else {
          this.$message.error(response.message || '加载设备详情失败')
        }
      } catch (error) {
        console.error('加载设备详情失败:', error)
        this.$message.error('加载设备详情失败')
      }
    },
    
    // 格式化维修记录
    formatRepairRecords(records) {
      this.repairRecords = records.map((record, index) => ({
        serialNumber: index + 1,
        maintenanceOrderNumber: record.equipmentMaintenanceId || '2382038023',
        maintenanceTime: this.formatDate(record.maintenanceTime) || '2023-11-12',
        maintenanceItem: record.maintenanceItem || 'XXXXX',
        faultDescription: record.faultDescription || 'XXXXX',
        maintenanceCost: record.maintenanceCost || '234.00',
        faultLevel: '1级',
        reporter: '张小琴',
        reportTime: '2023-11-10 11:20'
      }))
    },
    
    // 格式化保养记录
    formatMaintenanceRecords(records) {
      this.maintenanceRecords = records.map((record, index) => ({
        serialNumber: index + 1,
        maintenanceOrderNumber: record.maintenanceRecordId || '2382038023',
        maintenanceDate: this.formatDate(record.maintenanceDate) || '2023-11-12',
        maintenanceItem: record.maintenanceItem || 'XXXXX',
        remarks: record.remarks || 'XXXXX',
        maintenanceCost: record.maintenanceCost || '234.00',
        maintenancePerson: record.maintenancePerson || '张小琴',
        maintenanceTime: '2023-11-10 11:20'
      }))
    },
    
    // 格式化日期
    formatDate(date) {
      if (!date) return null
      const d = new Date(date)
      return d.getFullYear() + '-' + 
             String(d.getMonth() + 1).padStart(2, '0') + '-' + 
             String(d.getDate()).padStart(2, '0')
    },
    
    // 获取状态文本
    getStatusText(status) {
      return this.statusMap[status] || '正常'
    },
    
    // 获取类别文本
    getCategoryText(category) {
      return this.categoryMap[category] || '电子设备'
    },
    
    // 获取保养周期文本
    getMaintenancePeriodText(period) {
      return this.periodMap[period] || '12月'
    },
    
    // 返回上一页
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
.equipment-detail {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  background: white;
  padding: 20px 30px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.header-left {
  display: flex;
  align-items: center;
}

.back-btn {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  padding: 0;
}

.back-btn:hover {
  color: #409EFF;
}

.overview-section {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 30px;
  margin-bottom: 20px;
}

.overview-content {
  display: flex;
  gap: 40px;
}

.overview-col {
  flex: 1;
}

.tabs-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.equipment-tabs {
  padding: 0 30px;
}

.tab-content {
  padding: 30px 0;
}

.content-row {
  display: flex;
  gap: 40px;
}

.content-col {
  flex: 1;
}

.info-item {
  display: flex;
  margin-bottom: 20px;
  align-items: center;
}

.info-item .label {
  font-weight: 500;
  color: #606266;
  min-width: 120px;
  margin-right: 10px;
}

.info-item .value {
  color: #333;
  flex: 1;
}

.status-normal {
  color: #67c23a;
  font-weight: 500;
}

.table-container {
  margin-top: 20px;
}

/* 标签页样式调整 */
:deep(.el-tabs__header) {
  margin: 0 0 20px 0;
}

:deep(.el-tabs__nav-wrap::after) {
  background-color: #e4e7ed;
}

:deep(.el-tabs__item) {
  font-size: 14px;
  font-weight: 500;
  color: #606266;
  padding: 0 20px;
}

:deep(.el-tabs__item.is-active) {
  color: #409EFF;
}

:deep(.el-tabs__active-bar) {
  background-color: #409EFF;
}

/* 表格样式调整 */
:deep(.el-table th) {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 600;
}

:deep(.el-table td) {
  padding: 12px 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .equipment-detail {
    padding: 10px;
  }
  
  .overview-content,
  .content-row {
    flex-direction: column;
    gap: 0;
  }
  
  .overview-col,
  .content-col {
    margin-bottom: 20px;
  }
  
  .equipment-tabs {
    padding: 0 15px;
  }
  
  .tab-content {
    padding: 20px 0;
  }
  
  .info-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .info-item .label {
    min-width: auto;
    margin-bottom: 5px;
  }
}
</style>
